import type { PropType } from "vue";
import { defineComponent, Transition, TransitionGroup } from "vue";
import { getSlot } from "../../../utils/helper/TsxHelper";
import { Recordable } from "@mfish/types";

type Mode = "in-out" | "out-in" | "default" | undefined;

export function createSimpleTransition(name: string, origin = "top center 0", mode?: Mode) {
  return defineComponent({
    name,
    props: {
      group: {
        type: Boolean as PropType<boolean>,
        default: false
      },
      mode: {
        type: String as PropType<Mode>,
        default: mode
      },
      origin: {
        type: String as PropType<string>,
        default: origin
      }
    },
    setup(props, { slots, attrs }) {
      const onBeforeEnter = (el: HTMLElement) => {
        el.style.transformOrigin = props.origin;
      };

      return () => {
        const Tag = props.group ? TransitionGroup : Transition;
        return (
          <Tag name={name} mode={props.mode} {...attrs} onBeforeEnter={onBeforeEnter}>
            {() => getSlot(slots)}
          </Tag>
        );
      };
    }
  });
}

export function createJavascriptTransition(name: string, functions: Recordable, mode: Mode = "in-out") {
  return defineComponent({
    name,
    props: {
      mode: {
        type: String as PropType<Mode>,
        default: mode
      }
    },
    setup(props, { attrs, slots }) {
      return () => {
        return (
          <Transition
            name={name}
            mode={props.mode}
            {...attrs}
            onBeforeEnter={functions.beforeEnter}
            onEnter={functions.enter}
            onLeave={functions.leave}
            onAfterLeave={functions.afterLeave}
            onLeaveCancelled={functions.afterLeave}
          >
            {() => getSlot(slots)}
          </Transition>
        );
      };
    }
  });
}
